Add live search to the project routines list

1 files changed, 25 insertions, 3 deletions

diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index 8d62a39..7d9a146 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -13,6 +13,7 @@
 	} from '$lib/shared/routine-metrics';
 	import SectionTitle from '$lib/components/SectionTitle.svelte';
 	import { formatDayMonth } from '$lib/shared/temporal';
+	import { filterByName } from '$lib/shared/filter-items';
 
 	let { data, form } = $props();
 
@@ -35,6 +36,11 @@
 			(a, b) => b.overdueRatio - a.overdueRatio || a.name.localeCompare(b.name),
 		);
 	}
+
+	let routineSearch = $state('');
+	const filteredRoutines = $derived(
+		filterByName(sorted(data.routines), routineSearch),
+	);
 </script>
 
 <main>
@@ -102,8 +108,17 @@
 		<p class="error">{form.error}</p>
 	{/if}
 
+	<input
+		class="form-input routine-search"
+		type="search"
+		bind:value={routineSearch}
+		placeholder="Rechercher une routine..."
+		autocomplete="off"
+		aria-label="Rechercher parmi les routines"
+	/>
+
 	<ul class="item-list">
-		{#each sorted(data.routines) as routine (routine.id)}
+		{#each filteredRoutines as routine (routine.id)}
 			<Row style="flex-wrap: wrap; padding: 0.75rem 1rem;">
 				<form method="POST" action="?/complete" use:enhance>
 					<input type="hidden" name="id" value={routine.id} />
@@ -133,8 +148,10 @@
 		{/each}
 	</ul>
 
-	{#if data.routines.length === 0}
-		<p class="empty">Aucune routine</p>
+	{#if filteredRoutines.length === 0}
+		<p class="empty">
+			{data.routines.length === 0 ? 'Aucune routine' : 'Aucune correspondance.'}
+		</p>
 	{/if}
 
 	{#if data.archived.length > 0}
@@ -220,6 +237,11 @@
 		flex-shrink: 0;
 	}
 
+	.routine-search {
+		width: 100%;
+		margin-bottom: 0.75rem;
+	}
+
 	.page-footer {
 		margin-top: 2rem;
 		display: flex;